<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 类选择器 class
            1.设置给元素的 class 属性, 写什么都可以, 有意义即可
            2. css 中 .class的值即可命中对应的元素 
        */
        .city {
            font-weight: 900;
            font-size: 30px;
            color: orange;
        }
        .goods {
            /* 元素 如果同时添加了class 的样式和元素选择器的样式
                .class 的优先级更高一些 > 元素选择器
             */
            background-color: yellow;
        }
        span{
            font-style: italic;
            background-color: skyblue;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <h1>美诚月饼碰瓷美心月饼</h1>
    <p>
        9月18日上午,
        <span class="goods">美诚月饼</span>生产地之一的辖区市场监管局
        <span class="city">广州市花都区</span>
        市场监督管理局工作人员告诉积木新闻记者, 他们此提案已经开始了队管舟山市美诚食品有限公司的核查工作, 对该公司的营业资质以及和做授权问题进行了和产.目前,他们正与合肥市长见管理告诉大家.
        每场运兵是否涉嫌虚假宣传, 对资产, 该<span class="city">合肥方面</span>像积木新闻记者表示,关于虚假宣传的定性问题,还是要等他们与<span class="city">合肥方面</span>的办案人员进行沟通研究,依法依规进行研判.
    </p>
</body>
</html>